<template>
  <div class="header-wrapper" >
    <div class="header">
      <div class="header-left">
        <img src="../../../assets/images/logo.jpg" alt="">
      </div>
      <div class="header-mid">
        <div class="header-item">
          <i style="color:#7c6aa6" class="contact-icon am-icon-phone"></i>
          <div class="item">
            <strong>15284734573</strong>
            <span>周一 ~ 周五, 8:30 - 17:30</span>
          </div>
        </div>
        <div class="header-item">
          <i style="color:#7c6aa6" class="contact-icon am-icon-map-marker"></i>
          <div class="item">
            <strong> 四川省成都市</strong>
            <span>四川华迪实训基地</span>
          </div>
        </div>
      </div>
      <div class="header-right">
          <button type="button" @click="buttonPress">登录</button>
      </div>
    </div>

    <div class="nav-wrapper header-default">
      <div class="nav">

      </div>
    </div>
  </div>
</template>

<script>
import AppFunctions from "../../../utils/appFunction.js";
export default {
  name: "Header",
  components: {},
  data(){
    return{
      AppFunctions,

    }
  },
  methods: {
    toggleStickyHeader() {
      const scrolled = document.documentElement.scrollTop;
      if (scrolled > 100) {
        AppFunctions.addClass('.header-default', 'sticky');
      } else if (scrolled <= 100) {
        AppFunctions.removeClass('.header-default', 'sticky');
      }
    },
    buttonPress(){
      this.$router.push({ name: 'login' });
    }

  },
  created() {
    window.addEventListener('scroll', this.toggleStickyHeader);
  },
  mounted() {
    this.toggleStickyHeader();
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.toggleStickyHeader);
  },

}
</script>

<style scoped>
.router.router-link-active{
  /*color: #fff;*/
  /*background-color: #0e90d2;*/
  /*border: 1px solid #0e90d2;*/
  cursor: default;

  color: #0e90d2;
}

</style>
